<template>
  <span class="select-wrap">
    <el-select :class="[stringFlag?'adv-search-width':'']" :filterable="filterable" size="mini" v-model="firstObj" :placeholder="$t('public.pleasePick')" @change="changeCallLabelSelect" value-key="_id">
      <el-option :label="$t('webchat.webchatAll')" value="1"></el-option>
      <el-option
              class="label-select-option"
              v-for="item in callLabel.searchFirstLabel"
              :label="item.name"
              :value="item"
              :key="item._id"
              >
      </el-option>
    </el-select>
    <el-select :class="[stringFlag?'adv-search-width':'seletct-padding']" :filterable="filterable" size="mini" v-model="secondObj" :placeholder="$t('public.pleasePick')" @change="changeCallLabelSelect" value-key="_id">
      <el-option :label="$t('webchat.webchatAll')" value="2"></el-option>
      <el-option
              class="label-select-option"
              v-for="item in secondStepLabel"
              :label="item.name"
              :value="item"
              :key="item._id"
              >
      </el-option>
    </el-select>
    <el-select size="mini" v-model="thirdObj" :placeholder="$t('public.pleasePick')" :filterable="filterable" @change="changeCallLabelSelect" value-key="_id">
      <el-option :label="$t('webchat.webchatAll')" value="3"></el-option>
      <el-option
              class="label-select-option"
              v-for="item in thirdStepLabel"
              :label="item.name"
              :value="item"
              :key="item._id"
              >
      </el-option>
    </el-select>
  </span>
</template>
<script>
  import {getAllUseMultiCallLabel, getAllUseSingleCallLabel} from '@/utils/m7Utils.js'
  export default {
    name: 'labelSelect',
    props: {
      filterable: Boolean,
      stringFlag: Boolean, // 通话高级搜索带上name值
      secondLabel: Array,
      thirdLabel: Array,
      resetSelect: Boolean,
      isClear: Boolean,
      isNoLabel: {type: Boolean, default: false} // 第一级是否展示"无标签" eg: 通话高级搜索
    },
    data () {
      return {
        callForm: {
          multiFirst: '',
          multiTwo: '',
          multiThree: '',
          type: ''
        },
        firstObj: '',
        secondObj: '',
        thirdObj: '',
        callLabel: {},
        secondStepLabel: [],
        thirdStepLabel: []
      }
    },
    watch: {
      resetSelect: 'resetSelectes',
      isClear: 'isCleares'
    },
    methods: {
      resetSelectes (cur, prev) {
        if (this.resetSelect) {
          this.firstObj = ''
          this.secondObj = ''
          this.thirdObj = ''
          this.callForm.multiFirst = ''   //   重置或清空下拉框时  把 callForm 内数据清空 避免把错误的数据 发送到父组件
          this.callForm.multiTwo = ''
          this.callForm.multiThree = ''
          this.$emit('labelSelect', {multiFirst: '', multiTwo: '', multiThree: '', type: ''}, 'multiCallLabel')
        }
      },
      isCleares () {
        if (this.isClear) { // 高级搜索的清空操作
          this.firstObj = ''
          this.secondObj = ''
          this.thirdObj = ''
          this.callForm.multiFirst = ''     //   重置或清空下拉框时  把 callForm 内数据清空 避免把错误的数据 发送到父组件
          this.callForm.multiTwo = ''
          this.callForm.multiThree = ''
          this.$emit('labelSelect', {multiFirst: '', multiTwo: '', multiThree: '', type: ''}, 'multiCallLabel')
        }
      },
      changeCallLabelSelect (item) {
        if (item.level === 1) {
          let secondStepLabel = this.callLabel.secondStepLabel
          this.secondStepLabel = [] // change的时候之前的数组清空
          this.thirdStepLabel = []
          this.secondObj = ''
          this.thirdObj = ''
          for (let i = 0; i < secondStepLabel.length; i++) {
            if (secondStepLabel[i].keyStr.indexOf(item.keyStr + '-') > -1) { // 根据选择的标签来匹配自己的孩子
              this.secondStepLabel.push(secondStepLabel[i])
            }
          }
          if (this.stringFlag) { // 通话高级搜索带上name值
            this.callForm.multiFirst = item._id + '__' + item.name
          } else {
            this.callForm.multiFirst = item._id
          }
          this.callForm.type = item.type
          this.callForm.multiTwo = '' // 清空操作，避免第二次操作的时候带上就值
          this.callForm.multiThree = ''
        } else if (item.level === 2) {
          let thirdStepLabel = this.callLabel.thirdStepLabel
          this.thirdStepLabel = []
          this.thirdObj = ''
          for (let i = 0; i < thirdStepLabel.length; i++) {
            if (thirdStepLabel[i].keyStr.indexOf(item.keyStr + '-') > -1) {
              this.thirdStepLabel.push(thirdStepLabel[i])
            }
          }
          if (this.stringFlag) { // 通话高级搜索带上name值
            this.callForm.multiTwo = item._id + '__' + item.name
          } else {
            this.callForm.multiTwo = item._id
          }
          this.callForm.multiThree = ''
        } else if (item.level === 3) {
          if (this.stringFlag) { // 通话高级搜索带上name值
            this.callForm.multiThree = item._id + '__' + item.name
          } else {
            this.callForm.multiThree = item._id
          }
        } else if (item.level === 100) { // "无标签"
          this.secondStepLabel = [] // change的时候之前的数组清空
          this.thirdStepLabel = []
          this.secondObj = ''
          this.thirdObj = ''
          this.callForm.multiTwo = ''
          this.callForm.multiThree = ''
          if (this.stringFlag) { // 通话高级搜索带上name值
            this.callForm.multiFirst = item._id + '__' + item.name
          } else {
            this.callForm.multiFirst = item._id
          }
        }
        if (item === '1') { // 1级标签  请选择
          this.callForm.multiFirst = '' // select 清空
          this.callForm.multiTwo = ''
          this.callForm.multiThree = ''
          this.secondObj = ''
          this.thirdObj = ''
          this.secondStepLabel = [] // 下级的下拉框清空
          this.thirdStepLabel = []
        } else if (item === '2') { // 2级标签 请选择
          this.callForm.multiTwo = ''
          this.callForm.multiThree = ''
          this.thirdObj = ''
          this.thirdStepLabel = []
        } else if (item === '3') {
          this.callForm.multiThree = ''
        }
        if (item === '') {
          this.$emit('labelSelect', {multiFirst: this.callForm.multiFirst, multiTwo: this.callForm.multiTwo, multiThree: this.callForm.multiThree, type: this.callForm.type}, 'multiCallLabel')
        } else {
          this.$emit('labelSelect', this.callForm, 'multiCallLabel')
        }
      }
    },
    beforeMount () {
      let allLabel = this.$getCache('callLabel')
      if (allLabel === -1) {
        allLabel = []
      }
      let search = true
      let singleObj = getAllUseSingleCallLabel(allLabel, search)
      let multiObj = getAllUseMultiCallLabel(allLabel, singleObj.searchSingleLabel, search)
      this.callLabel = multiObj
      const nullObj = {level: 100, name: '无标签', _id: 'noLabel'}
      if (this.callLabel.searchFirstLabel && this.isNoLabel) {
        this.callLabel.searchFirstLabel.unshift(nullObj)
      }
      console.log(this.callLabel)
      if (!allLabel) {   //   解决刷新页面   数据取不到
        this.$store.dispatch('getCache', {type: 'callLabel'}).then((res) => {
          allLabel = res || []
          singleObj = getAllUseSingleCallLabel(allLabel, search)
          multiObj = getAllUseMultiCallLabel(allLabel, singleObj.searchSingleLabel, search)
          this.callLabel = multiObj
          if (this.callLabel.searchFirstLabel && this.isNoLabel) {
            this.callLabel.searchFirstLabel.unshift(nullObj)
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .adv-search-width
    width 192px
    margin-right 14px
  .seletct-padding
   padding 0 10px
  .select-wrap
    .el-select
      width 30%
  .label-select-option
    max-width 500px
    height auto
    word-wrap break-word
    white-space normal
</style>
